<template>
  <BaseDialog :loading="loading" destroy-on-close @confirm="save"  @close="close" confirmText="保存" v-model="isShow"
              title="设置职位">
    <div class="flex flex-row-reverse mb-1.5">
      <el-button v-buttonBlur type="primary" @click="addUserPostHandler">新增</el-button>
    </div>
    <BaseEditTable ref="tableRef" v-model="data" :columns="columns">
      <template #operate="scope,item">
        <el-button link type="danger" @click="delUserPostHandler(scope.$index)">删除</el-button>
      </template>
    </BaseEditTable>
  </BaseDialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref,nextTick} from "vue";

import {listTreeOrg} from "/@/api/system/OrgApi";
import {OrgModel} from "/@/api/system/model/OrgModel";
import {PostModel} from "/@/api/system/model/PostModel";
import {useDictStore} from "/@/store/modules/dict";
import {DictDataModel} from "/@/api/system/model/DictModel";
import {listPostAll} from "/@/api/system/PostApi";
import {saveUserPost} from "/@/api/system/UserApi";
import {UserPostModel} from "/@/api/system/model/UserModel";
import {Column} from "/@/components/Base/BaseEditTable/ts";

const isShow = ref(false)
const data = ref<UserPostModel[]>([])
const tableRef = ref()
const loading = ref(false)
const orgTreeData = ref<OrgModel[]>([])
const postData = ref<PostModel[]>([])
const dataType = ref<DictDataModel[]>([])
const value1 = ref()
const user = reactive({
  userId: "",
  orgId: ""
})
const init = ({userId,orgId},dataValue) => {
  user.userId = userId
  user.orgId = orgId
  isShow.value = true
  if(dataValue){
    nextTick(()=>{
      tableRef.value.setData(dataValue)
    })
  }
  isShow.value = true
}
const save = async () => {
  loading.value = true
  let data = tableRef.value.getData()
  await saveUserPost({userId: user.userId,posts: data},()=>{
    loading.value = false
  })
  close()
}
const close = () => {
  data.value = []
  isShow.value = false
}
const delUserPostHandler = (index: number) => {
  tableRef.value.remove(index)
}
const addUserPostHandler = () => {
  tableRef.value.add({
    orgId: user.orgId,
    postId: '',
    dataCode: 1
  })
}
const loadOrgData =  async () => {
   let res = await listTreeOrg({orgId: '0', isCompany: false})
   orgTreeData.value = res
}
const loadPostData = async ()=>{
 let res = await  listPostAll()
  postData.value = res
}
const loadDictData = async ()=>{
  let dictStore = useDictStore();
  dataType.value = await dictStore.getDict('data_type_dict')
}
onMounted(()=>{
  loadOrgData()
  loadPostData()
  loadDictData()
})
defineExpose({init})
const columns: Column[] = [
  {
    label: "序号",
    type: 'index',
    width: "60",
    align: 'center',
    headerAlign: 'center',
  },
  {
    label: '组织机构',
    prop: 'orgId',
    component: "SelectTree",
    align: 'center',
    headerAlign: 'center',
    componentAttr:{
      data: orgTreeData,
      props: {
        label: 'orgName',
        value: 'orgId',
        children: 'children'
      },
      checkStrictly: true
    },
    rules: [
      {required: true, message: '组织机构不能为空', trigger: 'blur'},
    ]
  },
  {
    label: '职位',
    prop: 'postId',
    component: "Select",
    align: 'center',
    headerAlign: 'center',
    componentAttr:{
      options: postData,
      toStr: true,
      props: {
        label: 'postName',
        value: 'postId',
      }
    },
    rules: [
      {required: true, message: '职位不能为空', trigger: 'blur'},
    ]
  },
  {
    label: '数据范围',
    prop: 'dataCode',
    align: 'center',
    headerAlign: 'center',
    component: "Select",
    componentAttr:{
      options: dataType
    },
    rules: [
      {required: true, message: '数据范围不能为空', trigger: 'blur'},
    ]
  },
  {
    label: '操作',
    align: 'center',
    headerAlign: 'center',
    custom: 'operate'
  }
]
</script>

<style scoped>

</style>